[jQuery] 점점 투명하게 만들기, animate(), opacity

Last Modified : 2017-12-18 / Created : 2014-08-30

37,680
View Count

주소 복사하기

제이쿼리(jQuery)는 animte() 객체를 사용한 다양한 동적 기능을 제공합니다. 그 중에서도 특히 opacity 속성이 많이 사용되는데 이를 이용해 원하는 문서 요소를 쉽고 간단하게 투명하게 만들 수 있습니다.

# jQuery animate() 함수의 opacity 속성 사용하기

아래는 간단한 문법 및 사용방법입니다.

$('#testEle').animate({opacity: '1'}, 1000};
$('#요소명').animate({opacity: '설정값'}, 지연시간};

선택 가능한 옵션으로 아래와 같이 두 가지 값을 인자로 넘겨줄 수 있습니다.

! 간단한 예제코드 보기

서서히 사라지거나 나타나게 하는 경우 아래와 같이 사용할 수 있습니다.
@ opacity.html

<span class="test">Opacity test code</span>

위 엘리먼트 요소를 서서히 감추거나 나타나도록 아래와 같이 스크립트를 사용합니다.
@ opacity.js

var test = $('.test');

test.animate({opacity: "0"}, 500);
test.animate({opacity: "1"}, 1000);

먼저 첫번째 코드는 test 엘리먼트 요소를 500ms의 속도로 0이 되도록 변환, 즉 opacity를 0으로 만들어 사라지게합니다.
그리고 다음 두번째 코드 예제는 test 요소를 1000ms의 속도로 opacity가 1이 되게 함. 즉, 다시 보이도록 해줍니다.

# animate(), opacity 실전예제보기
이번 예제는 좀 더 구체적인 예제를 사용하여 알아봅니다.

@ opacity.html

<div id="testEle"></div>
<button type="button" class="testbt1 bt" >{ opacity: 0 }</button>
<button class="testbt2 bt" type="button" >{ opacity: 1 }</button>

@ opacity.css

#testEle {
margin: 0 auto;
width:50px;
height: 50px;
background: #00f;
}
.bt {
margin: 2px;
}

@ opacity.js

$(document).ready(function() {
$('.testbt1').click(function(){
$('#testEle').animate({opacity:"0"}, 1000);
});
$('.testbt2').click(function(){
$('#testEle').animate({opacity:"1"}, 1000);
});
})

위 코드를 실행하면 어떻게 될까요? 실제로 아래 버튼을 클릭해 알아보세요.

# 위 예제의 자세한 설명, animate() opacity

그럼 위 예제는 어떻게 동작하는 것일까요?

i. opacity 뒤에는 0부터 1까지 투명도를 설정할 수 있습니다.
ii. 뒤에 적힌 500은 밀리세컨드를 나타내며 변화되는 속도를 정할 수 있습니다. 참고로 숫자가 아닌 다음의 값도 사용할 수 있습니다.
- fast 또는 slow(천천히 또는 빠르게 변환)